<template>
  <div>
      <div class="nav" :style="{'opacity':opacity}">home</div>
      <router-link to="/detail" style="margin-top:100px;display:block">detail</router-link>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      opacity:0
    }
  },
  // created() {
  //   console.log("created")
  // },
  mounted(){
    console.log("mounted")
    window.addEventListener("scroll",this.handleScroll)
  },
  destroyed() {
    console.log("destroyed")
    window.removeEventListener("scroll",this.handleScroll)
  },
  /* updated() {
    console.log("updated")
  }, */
  methods: {
    handleScroll(){
      // console.log(1)
      var scrollTop = document.documentElement.scrollTop;
      var opacity = scrollTop/300;
      if(opacity>1){
        opacity = 1
      }
      // console.log(opacity)
      this.opacity = opacity
      //当窗口滚动至300px时，opacity=1
    }
  },
}
</script>
<style >
.nav{
  line-height: 50px;
  background: red;
  width: 100%;
  position: fixed;
  top: 0;
}
  
</style>
